import React, { useRef } from "react";
import XxtvCard from "../card/xxtv-card";
import styles from "./report-view.module.scss";
import EchartModel from "../echart/pie-doughnut-element";
import XxTableModal from "../xx-tableModal/xx-tableModal";
const ReportView = ({
    prentParams,
    sumVeriPayCot = 0, // 标的车损险赔款台数
    sumVeriPayFee = 0.00, // 标的车损险赔款金额
    szCarPropSumPaid = 0.00, // 三者车物/物损金额
    szPersonSumPaid = 0.00, // 三者人伤金额
    otherSumPaid = 0.00, // 其他赔款
    carLossFeeRatio = 0, // 标的车损（赔款比例）
    szLossFeeRatio = 0, // 三者车物（赔款比例）
    szPersonFeeRatio = 0, // 三者人伤（赔款比例）
    otherFeeRatio = 0, // 其他赔款（赔款比例）
    validCaseCnt = 0, // 有效立案数量
    invalidCaseCnt = 0, // 无效案件/销案数量
}) => {



    const modRef = useRef();

    const ActionElementBtn = () => {
        return (
            <>
                <div
                    className={styles.actionBtn}
                    onClick={() => modRef.current.initModal({
                        listViewProps: {
                            menuCode: "carDealerClm",
                            hideActionPanel: true,
                            prentParams: {
                                ...prentParams,
                                pageSize: 20
                            },
                            hideSearchPanel: true,
                            upDoubleClick: () => { },
                        },
                        modalProps: {
                            title: "理赔清单",
                            width: 1200,
                        }

                    })} >查看清单</div>
            </>
        )
    }
    return (
        <>
            <XxTableModal onRef={modRef} />
            <XxtvCard
                title="代码单赔付情况"
                ActionElement={<ActionElementBtn />}
            >
                <div className={styles.module}>
                    <div className="echart-box">
                        <div className="echart">
                            <EchartModel
                                state={[
                                    { value: sumVeriPayFee, name: '标的车损', count: sumVeriPayCot },
                                    { value: szCarPropSumPaid, name: '三者车物' },
                                    { value: szPersonSumPaid, name: '三者人伤' },
                                    { value: otherSumPaid, name: '其他' },

                                ]}
                            // options={option}
                            />
                        </div>
                    </div>
                    <div className="context-box">
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">
                                    {sumVeriPayCot}
                                </div>
                                <div className="label">标的车损（台）</div>
                            </div>
                        </div>
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">
                                    {sumVeriPayFee.toFixed(2)}
                                </div>
                                <div className="label">标的车损（万元）</div>
                            </div>
                        </div>
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">
                                    {szCarPropSumPaid.toFixed(2)}
                                </div>
                                <div className="label">三者车物（万元）</div>
                            </div>
                        </div>
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">
                                    {szPersonSumPaid.toFixed(2)}
                                </div>
                                <div className="label">三者人伤（万元）</div>
                            </div>
                        </div>
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">
                                    {otherSumPaid.toFixed(2)}
                                </div>
                                <div className="label">其他（万元）</div>
                            </div>
                        </div>
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">
                                    {invalidCaseCnt}/{validCaseCnt}
                                </div>
                                <div className="label">无效/有效案件（个）</div>
                            </div>
                        </div>
                    </div>
                </div>
            </XxtvCard>
        </>
    )
}
export default ReportView;